<template>
  <h2>文章分类</h2>

  <a-skeleton active :loading="loading" :paragraph="{ rows: 12 }">
    <a-row class="category__list" :gutter="16" v-if="categoryList.length > 0">
      <a-col
        :sm="8"
        :md="6"
        :lg="4"
        v-for="category in categoryList"
        :key="category.id"
      >
        <router-link
          class="block"
          :to="{ name: 'Category', params: { name: category.category_name } }"
        >
          <a-badge class="block" :count="category.category_count">
            <div class="category__card">
              <el-image
                :src="category.poster || defaultCategoryPoster"
                class="category__poster"
                lazy
                fit="contain"
              />
              <div class="category__title">
                {{ category.category_name }}
              </div>
            </div>
          </a-badge>
        </router-link></a-col
      >
    </a-row>

    <template v-else>
      <a-empty />
    </template>
  </a-skeleton>
</template>

<script setup lang="ts">
import { categoryService } from '@/api/category';
import { CategoryDTO } from '@/bean/dto';
import { useAsyncLoading } from '@/hooks/async';
import { ref } from 'vue';

import defaultCategoryPoster from '@/assets/img/default_category.svg';

const categoryList = ref<CategoryDTO[]>([]);

const handleGetCategoryList = async () => {
  const res = await categoryService.All({ getCount: true });
  console.log(res);
  categoryList.value = res.data;
};

// 获取数据
const { trigger: getCategoryList, loading } = useAsyncLoading(
  handleGetCategoryList
);
getCategoryList();
</script>

<style scoped lang="scss">
h2 {
  margin: 0;
  text-align: center;
}

.category__card {
  position: relative;
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
:deep(.category__poster) {
  width: 100%;
  height: 120px;
}
.category__title {
  text-align: center;
  font-size: 14px;
  color: #666;
  padding-bottom: 4px;
}
</style>
